<template>
  <div class="cart">
    <Header @func="showDelBtn"></Header>
    <!-- 购物车列表 -->
    <ul class="cartList">
      <li v-for="item in cartList" :key="item.product._id">
        <van-checkbox v-model="item.checked" />
        <div class="product">
          <img
            :src="item.product.coverImg"
            alt=""
            @click="toDetail(item.product._id)"
          />
          <div>
            <p>{{ item.product.name }}</p>
            <p>￥{{ item.product.price }}</p>
            <p>
              <van-stepper
                v-model="item.quantity"
                theme="round"
                button-size="22"
                disable-input
                :max="item.product.quantity"
                @plus="plus(item.product._id, 1)"
                @minus="minus(item.product._id, -1)"
              />
              <span>
                限购
                {{ item.product.quantity }}
                件
              </span>
            </p>
          </div>
        </div>
      </li>
    </ul>

    <!-- 删除按钮栏 -->
    <van-submit-bar
      button-text="删除"
      @submit="delShop"
      v-if="showdel"
      button-color="orgin"
    >
      <van-checkbox v-model="checked" class="del-checkbox">全选</van-checkbox>
      <p class="total">
        已选择
        <span>{{ total }}</span
        >件
      </p>
    </van-submit-bar>
    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="sumPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
      v-else
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import { addCartAPI, reqCartAPI, delpro, delmanycart } from "../../api/cart";
import { addOrderAPI } from "@/api/order";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      cartList: [], //购物车列表
      showdel: false,
    };
  },
  computed: {
    //计算属性是直接可以使用的
    //全选和全不选
    checked: {
      //set里发生改变，get里获取最新的值
      set(flag) {
        //$set 表示给vue对象动态添加属性checked
        // 此时 cartList里面已经存在了checked这个属性
        this.cartList.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        // 判断选中的长度是不是等于carList长度
        // 如果相等，就全部被选中
        if (this.cartList.length == 0) {
          //购物车没有数据，全选就不选中
          return false;
        } else {
          return (
            this.cartList.length ==
            this.cartList.filter((item) => item.checked == true).length
          );
        }
      },
    },
    //计算总数
    total() {
      return this.cartList
        .filter((item) => {
          return item.checked; //筛选出选中的
        })
        .reduce(function (pre, cur) {
          return (pre += cur.quantity);
        }, 0);
    },
    //计算总价
    sumPrice() {
      return this.cartList
        .filter((item) => {
          return item.checked; //筛选出选中的
        })
        .reduce(function (pre, cur) {
          //计算价格 pre初始值，cur当前项
          // pre 和cur都是筛选出来的cartList里面的item
          // cur.quantity 是当前购物车商品数量
          return (pre += cur.product.price * cur.quantity);
        }, 0);
    },
    //计算属性，根据checked获取选中了哪几个商品
    checkedList() {
      let arr = []; //定义一个arr用来存储已选中的商品
      this.cartList.forEach((item) => {
        //如果选中了，就把信息存入arr数组里
        if (item.checked) {
          // item._id 删除的是存在购物车里商品的id，不是商品本身id
          // 因为后面加入订单时要用到商品id，价格，购物车的数量
          let obj = {
            cid: item._id, //购物车中商品的id
            pid: item.product._id, //商品的id
            price: item.product.price,
            quantity: item.quantity, //购物车中商品的数量
          };
          arr.push(obj);
        }
      });
      return arr;
    },
  },
  watch: {},

  methods: {
    //获取购物车中商品列表
    async getCart() {
      const result = await reqCartAPI();
      // let result = await this.$http.get(
      //   "http://localhost:3009/api/v1/shop_carts"
      // );
      console.log(result);
      this.cartList = result;
    },
    // 添加减少商品的数量
    async plus(id, num) {
      // console.log(id, num);
      //这个id表示的是此商品的id，不是购物车的id; num是商品在购物车中的数量
      //我要操作这个id，调用添加购物车那个接口，把添加的数量重新更正
      await addCartAPI({
        //调用接口，更正此数量
        product: id, //商品id
        quantity: num,
      });
    },
    async minus(id, num) {
      await addCartAPI({
        //调用接口，更正此数量
        product: id, //商品id
        quantity: num,
      });
    },
    //接收Header组件传来的showdel值，从而达到，点击头部，可以操纵页面的效果
    showDelBtn(data) {
      this.showdel = data;
    },
    // 删除操作
    delShop() {
      // this.checkedList 就是此时已经选中的商品
      console.log(this.checkedList);
      Dialog.confirm({
        title: "确认移出购物车嘛",
      })
        .then(() => {
          Toast.loading({
            message: "删除中...",
            forbidClick: true,
            duration: 1000,
          });
          // 进行判断，如果列表的长度等于一条，就调用删除一条的API
          // 否则，多条的话就调用删除多条的API
          setTimeout(() => {
            if (this.checkedList.length == 1) {
              delpro(this.checkedList[0].cid);
            } else if (this.checkedList.length > 1) {
              let idsArr = [];
              this.checkedList.forEach((item) => {
                idsArr.push(item.cid);
              });
              delmanycart({ ids: idsArr });
            }
            this.getCart();
          }, 1100);
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击跳转到详情页
    toDetail(pid) {
      //动态传参
      this.$router.push({
        path: "/detail/" + pid,
      });
    },
    //提交订单
    async onSubmit() {
      //如果vuex里面没有默认收货地址，就跳转到收货地址页
      const addressArr = this.$store.state.receiver;
      // console.log(addressArr);
      // 过滤一下数组，过滤出是默认地址的 isDefault == true
      let newArr = addressArr.filter((item) => {
        return item.isDefault == true;
      });
      console.log(...newArr); //里面应该只有一个地址，是默认收货地址
      console.log(this.checkedList);
      //存在的话，直接把选中的商品加入订单
      if (newArr.length == 1) {
        let addressObj = newArr[0];
        let { name, address, regions } = addressObj; //拿到默认收货人地址
        const result = await addOrderAPI({
          receiver: name,
          regions: regions,
          address: address,
          orderDetails: this.checkedList,
        });
        console.log(result);
        if (result.code == "success") {
          //添加成功，跳转到订单列表页
          this.$router.push({
            path: "/order",
          });
        }
      } else {
        //如果没有默认收货人，就跳转到地址列表进行选择
        this.$router.push({
          path: "/addressList",
        });
      }
      //实现商品的提交需要以下的内容
      // quantity  数量
      // product   商品id
      // price     商品单价
    },
  },
  created() {
    this.getCart();
    this.showDelBtn();
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.cartList li {
  height: 110px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 12px;
  color: #323233;
  font-size: 12px;
  background-color: #fafafa;
  margin-top: 8px;
}
.cartList li img {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}
.product {
  display: flex;
  margin-left: 20px;
  line-height: 2;
}
.product p:first-child {
  font-size: 13px;
}
.product p:nth-of-type(2) {
  color: red;
  font-size: 16px;
}
.product p:nth-of-type(3) {
  display: flex;
  align-items: center;
}
.product p:nth-of-type(3) span {
  margin-left: 8px;
}
.del-checkbox {
  position: absolute;
  left: 16px;
  top: 15px;
}
.cart {
  padding-bottom: 100px;
}
.van-submit-bar {
  margin-bottom: 50px;
}
.total {
  margin-right: 10px;
}
.total span {
  font-size: 19px;
  color: #ee0a24;
  font-weight: 500;
  padding: 0 5px 0 0;
}
</style>
